<template>
	<view class="password-set-page">
		<cu-custom is-back></cu-custom>
		<view class="margin text-xl text-right" style="height: 100rpx;">
		</view>
		<view class="cc">请输入支付密码</view>
		<view class="cc1"><text>支付</text></view>
		<view class="cc2"><text>￥3000</text></view>
		<u-line style="margin-top: 30rpx;"></u-line>
		<view class="checkout">
			<view class="zhifu">支付方式</view>
			<view class="select_box">
				<picker @change="handleChange" :range="exitData">
					<label class="">{{ currExit }} ></label>
				</picker>
			</view>
		</view>
		<view class="text-df text-center text-gray margin-tb"></view>
		<view class="code flex align-center justify-center" style="margin-top: 10vh;">
			<view class="flex align-center justify-center">
				<view v-for="(item, index) in 6" :key="index">{{ password[index] && '●' || '' }}</view>
			</view>
		</view>
		<view class="keyboard flex flex-wrap">
			<button v-for="(item, index) in 9" :key="index" @click="key(index + 1)">
				<text>{{ index + 1 }}</text>
			</button>
			<button class="hide"></button>
			<button @click="key(0)">
				<text>0</text>
			</button>
			<button @click="del()">
				<image src="../../../static/OIP-b.jpg" mode="aspectFill"></image>
			</button>
		</view>
	</view>
</template>
<script>
		import request from '../../../request.js'
	let mouthCard = localStorage.getItem("mouthCard")
	  ? JSON.parse(localStorage.getItem("mouthCard"))
	  : null;
	export default {
		data() {
			return {
				password: '',
				exitData: ['支付宝', '微信', '余额'],
				currIndex: 0,
				currExit: '支付宝',
			}
		},
		methods: {
			handleChange(e) {
				this.currIndex = e.target.value;
				this.currExit = this.exitData[this.currIndex]
			},
			key(key) {
			
				if (this.password.length < 6) {
					this.password += key
					if (this.password.length === 6) {

							console.log(JSON.stringify(mouthCard))
						// 密码验证操作
						console.log(this.password)
						request({
							url: `/carshop/month-card/buyMonthCard`,
						  data:mouthCard,
							method: 'Post',
							success: (res) => {
							if(res.data.code == 20000){

							  console.log("成功")

							}else{
							  console.log("失败")
							}
							}
						}),
						uni.navigateTo({
							url: '../../service/success'
						})

					}
				}
			},
			del() {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1)
				}
			}
		}
	}
</script>
<style lang="scss">
	.cc {
		font-size: 30rpx;
		text-align: center;
	}

	.cc1 {
		margin-left: 350rpx;
		margin-top: 30rpx;
	}

	.cc2 {
		margin-top: 10rpx;
		font-size: 50rpx;
		text-align: center;
	}

	.zhifu {
		margin-left: 80rpx;
	}

	.checkout {
		margin-top: 30rpx;
		// padding: 30rpx;

		.select_box {
			height: 35px;
			line-height: 35px;
			// border: 1px solid #E5AC3C;
			border-radius: 6rpx;
			font-size: 30rpx;
			text-align: center;
			width: 130rpx;
			margin-left: 600rpx;
			margin-top: -65rpx;
		}
	}

	page {
		background: #FFFFFF;
	}

	.password-set-page {
		.code {
			>view {
				border: 1px solid #DDDDDD;
				border-radius: 8rpx;
				overflow: hidden;

				view {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100rpx;
					height: 100rpx;
					background: #FAFAFA;
					font-size: 60rpx;

					&:not(:last-child) {
						border-right: 1px solid #DDDDDD;
					}
				}
			}
		}

		.keyboard {
			position: fixed;
			bottom: 0;
			width: 100%;
			background: #EEEEEE;

			button {
				display: flex;
				align-items: center;
				justify-content: center;
				width: calc(100vw / 3 - 1px);
				background: #FFFFFF;
				border-radius: 0;
				margin-top: 1px;
				font-size: 50rpx;
				height: 120rpx;

				&.button-hover:not(.hide) {
					background: #EEEEEE;
				}

				image {
					width: 52rpx;
					height: 38rpx;
				}
			}
		}
	}
</style>
